<template>
  <NewModal :title="modalProps?.title || '示例模态框'">
    <div class="example-content">
      <div class="info-section">
        <h4>模态框信息</h4>
        <div class="info-grid">
          <div class="info-item">
            <span class="label">标题：</span>
            <span class="value">{{ modalProps?.title || '无标题' }}</span>
          </div>
          <div class="info-item">
            <span class="label">描述：</span>
            <span class="value">{{ modalProps?.description || '无描述' }}</span>
          </div>
          <div class="info-item">
            <span class="label">用户ID：</span>
            <span class="value">{{ modalProps?.userId || '未提供' }}</span>
          </div>
          <div class="info-item">
            <span class="label">时间：</span>
            <span class="value">{{ new Date().toLocaleString() }}</span>
          </div>
        </div>
      </div>

      <div class="action-section">
        <h5>选择操作</h5>
        <div class="action-buttons">
          <button 
            @click="handleAction('approve')" 
            class="btn btn-success"
            :disabled="loading"
          >
            批准
          </button>
          <button 
            @click="handleAction('reject')" 
            class="btn btn-danger"
            :disabled="loading"
          >
            拒绝
          </button>
          <button 
            @click="handleAction('pending')" 
            class="btn btn-warning"
            :disabled="loading"
          >
            待定
          </button>
        </div>
      </div>

      <div v-if="result" class="result-section">
        <h5>操作结果</h5>
        <div class="result" :class="result.type">
          {{ result.message }}
        </div>
      </div>
    </div>
  </NewModal>
</template>

<script setup>
import { ref } from 'vue';
import { useModalContext } from '../hooks/useModal';
import NewModal from './NewModal.vue';

// 使用hook获取上下文
const { modalProps, confirm, cancel, close } = useModalContext();

// 状态
const loading = ref(false);
const result = ref(null);

// 处理操作
const handleAction = async (action) => {
  loading.value = true;
  
  // 模拟API调用
  await new Promise(resolve => setTimeout(resolve, 1000));
  
  loading.value = false;
  
  const actions = {
    approve: { type: 'success', message: '操作已批准' },
    reject: { type: 'error', message: '操作已拒绝' },
    pending: { type: 'warning', message: '操作已设为待定' }
  };
  
  result.value = actions[action];
  
  // 2秒后自动关闭
  setTimeout(() => {
    confirm({
      action,
      result: result.value,
      data: modalProps
    });
  }, 2000);
};
</script>

<style scoped>
.example-content {
  min-height: 300px;
}

.info-section, .action-section, .result-section {
  margin-bottom: 24px;
}

.info-section h4, .action-section h5, .result-section h5 {
  margin: 0 0 12px 0;
  color: #333;
}

.info-grid {
  display: grid;
  gap: 8px;
}

.info-item {
  display: flex;
  align-items: center;
}

.label {
  font-weight: 500;
  color: #666;
  min-width: 60px;
}

.value {
  color: #333;
  margin-left: 8px;
}

.action-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn {
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid;
  cursor: pointer;
  font-size: 14px;
  min-width: 80px;
}

.btn-success {
  background: #52c41a;
  border-color: #52c41a;
  color: white;
}

.btn-danger {
  background: #ff4d4f;
  border-color: #ff4d4f;
  color: white;
}

.btn-warning {
  background: #faad14;
  border-color: #faad14;
  color: white;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.result-section .result {
  padding: 12px;
  border-radius: 4px;
  font-weight: 500;
}

.result.success {
  background: #f6ffed;
  border: 1px solid #b7eb8f;
  color: #52c41a;
}

.result.error {
  background: #fff2f0;
  border: 1px solid #ffccc7;
  color: #ff4d4f;
}

.result.warning {
  background: #fffbe6;
  border: 1px solid #ffe58f;
  color: #faad14;
}
</style>